<template>
  <div>
    <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" effect="dark" placement="bottom">
      <div class="screenfull" @click="toggle">
        <el-icon><FullScreen /></el-icon>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import screenfull from 'screenfull'
import { FullScreen } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const isFullscreen = ref(false)

let screenfullChange = null

onMounted(() => {
  if (screenfull.isEnabled) {
    screenfullChange = screenfull.on('change', change)
  }
})

onUnmounted(() => {
  if (screenfull.isEnabled) {
    screenfull.off('change', change)
  }
})

function change() {
  isFullscreen.value = screenfull.isFullscreen
}

function toggle() {
  if (!screenfull.isEnabled) {
    ElMessage({
      message: '你的浏览器不支持全屏',
      type: 'warning'
    })
    return false
  }
  screenfull.toggle()
}
</script>

<style lang="scss" scoped>
.screenfull {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style> 